<%@page contentType="text/html" pageEncoding="UTF-8" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="security" uri="http://www.springframework.org/security/tags" %>

<script type="text/javascript" src="<%=request.getContextPath()%>/dwr/engine.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/script/questionSet/main.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/dwr/interface/QuestionSetService.js"></script>
<script type="text/javascript">
    function delOnView() {
        if (confirm("Are you sure you want to delete this Page?")) {
            QuestionSetService.remove(${param.id}, removeFlag);
        }
    }

    function removeFlag(isSuccess) {
        if (isSuccess) {
            window.location.href = "list.html?message=Dialog%20has%20been%20deleted";
        } else {
            $("div.error h3").html("Operation Failed.");
        }
    }

    function closePopup() {
        $("#preview").hide();
    }

    $(document).ready(function() {
        $("#retireBtn").click(function() {
            var status = "${questionSet.status.name}";
            if (status == "retired") {
                alert("This action not available; Page is in Retired Status");
                return false;
            }

            return true;
        });

        $("#previewBtn").click(function() {
            preview(${param.id}, $("#qsTitle").html());
        });

        $("#previewBtn3").click(function() {
            preview(${param.id}, $("#qsTitle").html());
        });

        initQbtns();

        $("#previewCloseBtn").click(function() {
            $("#preview").hide();
        });
    });
</script>

<jsp:include page="menu.jsp"/>

<!--START: Subnav -->
<div class="sub_nav">
    <ul>
        <li>
            <a href="#" onclick="navToGeneral(); return false;">
                <img src="<%= request.getContextPath()%>/images/menu/sub_general_on.gif" alt="general"/>
            </a>
        </li>
        <li>
            <a href="#" onclick="navToQs(); return false;">
                <img src="<%= request.getContextPath()%>/images/menu/sub_questions_off.gif" alt="questions"/>
            </a>
        </li>
        <li>
            <a href="#" onclick="navToWhereUsed(); return false;">
                <img src="<%= request.getContextPath()%>/images/menu/sub_where_used_off.gif" alt="whereUsed"/>
            </a>
        </li>
    </ul>
</div>
<!--END: Subnav -->

<!--START: conent -->
<div id="general" class="content2">
    <div class="insider">
        <div class="corners">
            <div class="corners_top"></div>
            <div class="column1">
                <div class="col_l">
                    <table width="440" border="0" cellspacing="4" class="formlayout_table">
                        <tr>
                            <th width="188"><label>ID:</label></th>
                            <td width="240">${questionSet.refId}</td>
                        </tr>

                        <tr>
                            <th><label>Version:</label></th>
                            <td>${questionSet.version}</td>
                        </tr>

						 <tr>
                            <th><label>Name:</label></th>
                            <td>${questionSet.name}</td>
                        </tr>

                        <tr>
                            <th><label>Vocabulary Name:</label></th>
                            <td>${questionSet.vocabularyname}</td>
                        </tr>

                        <tr>
                            <th><label>Display Title:</label></th>
                            <td id="qsTitle"><c:out value="${questionSet.displayTitle}"/></td>
                        </tr>

                        <tr>
                            <th><label>Description:</label></th>
                            <td>${questionSet.description}</td>
                        </tr>

                        <tr>
                            <th><label>Help Text:</label></th>
                            <td>${questionSet.helpText}</td>
                        </tr>
                    </table>
                </div>
                <table width="282" border="0" cellspacing="4" class="formlayout_table fr">
                    <tr>
                        <th width="159"><label>Sibling ID:</label></th>
                        <td width="111">
                            <c:if test="${not empty questionSet.sibling}">
                                ${questionSet.sibling.refId}
                            </c:if>
                        </td>
                    </tr>

                    <tr>
                        <th><label>Sibling Version:</label></th>
                        <td>
                            <c:if test="${not empty questionSet.sibling}">
                                ${questionSet.sibling.version}
                            </c:if>
                        </td>
                    </tr>

                    <tr>
                        <th><label>Status:</label></th>
                        <td>
                            ${questionSet.status.code}
                        </td>
                    </tr>

                    <tr>
                        <th><label>Availability:</label></th>
                        <td>${questionSet.availability.code}</td>
                    </tr>

                    <tr>
                        <th><label>Last Modified Date:</label></th>
                        <td>
                            <fmt:formatDate value="${questionSet.modifiedOn}" pattern="dd-MMM-yyyy"/>
                        </td>
                    </tr>

                    <tr>
                        <th><label>Last Modified By:</label></th>
                        <td>
                            ${questionSet.modifiedBy.username}
                        </td>
                    </tr>

                    <tr>
                        <th><label>Retired By:</label></th>
                        <td>
                            <c:if test="${not empty questionSet.retiredBy}">
                                ${questionSet.retiredBy.username}
                            </c:if>
                        </td>
                    </tr>

                    <tr>
                        <th><label>Retire Date:</label></th>
                        <td>
                            <fmt:formatDate value="${questionSet.retiredOn}" pattern="dd-MMM-yyyy"/>
                        </td>
                    </tr>
                    <tr>
                        <th><label>Retire Notes:</label></th>
                        <td>
                            ${questionSet.retiredNote}
                        </td>
                    </tr>
                </table>
            </div>

            <ul class="functions1">
                <li>
                    <a id="backBtn" href="${param.from}">
                        <img class="btn"
                             src="<%= request.getContextPath()%>/images/btn/functions1/back_to_results.gif"/>
                    </a>
                </li>

                <c:set var="status" value="${questionSet.status.code}"/>
                <c:set var="availability" value="${questionSet.availability.code}"/>
                <security:authorize ifAnyGranted="ROLE_PORTAL_USER,ROLE_AUTHOR">
                    <c:if test="${status != 'retired'}">
                        <li>
                            <a href="#" onclick="Dialogs.unescapedLink('newversion.html?id=${param.id}', 'from')">
                                <img src="<%= request.getContextPath()%>/images/btn/functions1/btn_new_version.gif"
                                     class="btn"/>
                            </a>
                        </li>
                    </c:if>

                    <c:if test="${status != 'retired' && availability != 'locked'}">
                        <li>
                            <a href="#" onclick="Dialogs.unescapedLink('edit.html?id=${param.id}', 'from')">
                                <img src="<%= request.getContextPath()%>/images/btn/functions1/btn_edit.gif"
                                     class="btn"/>
                            </a>
                        </li>
                    </c:if>

                    <c:if test="${status != 'retired' && availability != 'locked' && empty questionSet.quesitonSetInNaires}">
                        <li>
                            <input type="image" onclick="delOnView();" alt="" class="btn"
                                   src="<%= request.getContextPath()%>/images/btn/functions1/btn_delete.gif"/>
                        </li>
                    </c:if>

                    <c:if test="${status == 'retired'}">
                        <li>
                            <img src="<%= request.getContextPath()%>/images/btn/functions1/btn_new_version_tint.gif"/>
                        </li>
                    </c:if>

                    <c:if test="${status == 'retired' || availability == 'locked'}">
                        <li>
                            <img src="<%= request.getContextPath()%>/images/btn/functions1/btn_edit_tint.gif"/>
                        </li>
                    </c:if>

                    <c:if test="${status == 'retired' || availability == 'locked' || not empty questionSet.quesitonSetInNaires}">
                        <li>
                            <img src="<%= request.getContextPath()%>/images/btn/functions1/btn_delete_tint.gif"/>
                        </li>
                    </c:if>

                    <li>
                        <a href="#" onclick="Dialogs.unescapedLink('copy.html?id=${param.id}', 'from')">
                            <img src="<%= request.getContextPath()%>/images/btn/functions1/btn_copy.gif" alt="copy"
                                 class="btn"/>
                        </a>
                    </li>

                    <li>
                        <input type="image" id="previewBtn" class="btn"
                               src="<%= request.getContextPath()%>/images/btn/functions1/btn_preview.gif"/>
                    </li>
                </security:authorize>

                <c:if test="${questionSet.status.name != 'retired'}">
                    <security:authorize ifAnyGranted="ROLE_PORTAL_USER,ROLE_REVIEWER">
                        <li>
                            <a id="retireBtn" href="#"
                               onclick="Dialogs.unescapedLink('retire.html?id=${param.id}', 'from')">
                                <img src="<%= request.getContextPath()%>/images/btn/functions1/btn_retire.gif" alt=""
                                     class="btn"/>
                            </a>
                        </li>
                    </security:authorize>
                </c:if>
            </ul>
            <div class="corners_bottom"></div>
        </div>

        <!-- Display Messages -->
        <div class="message">${message}</div>
    </div>
</div>
<!--END: conent -->

<!-- View Questions Included in the Page -->
<script type="text/javascript">
    var lightColorFlag = "_light.";

    function itemClick(item, params) {
        var btns = document.getElementsByName("qbtn");

        if ($(item).attr("class").indexOf("active") == -1) {
            $("div.question table").removeClass("active");

            $(item).addClass("active");

            itemParams = params;
            for (i = 0; i < btns.length; i++) {
                var btn = btns[i];

                var imgSrc = $(btn).attr("src");
                var newSrc = imgSrc.replace(lightColorFlag, '.');
                $(btn).attr("src", newSrc);
            }
        }
        else {
            $("div.question table").removeClass("active");

            itemParams = "";

            for (i = 0; i < btns.length; i++) {
                var btn = btns[i];

                $(btn).removeClass("btn");

                var imgSrc = $(btn).attr("src");
                var newSrc = imgSrc.replace(".", lightColorFlag);
                $(btn).attr("src", newSrc);
            }
        }
    }
</script>

<!-- Questions Tab Page -->
<jsp:include page="viewQuestions.jsp"/>

<!-- WhereUsed Tab Page -->
<jsp:include page="whereUsed.jsp"/>